import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

const Echarts = () => {
    const chartRef = useRef()
    const options = {
        // 标题
        // title: {
        //     text: "柱状图"
        // },
        // 提示框组件
        tooltip: {
            // trigger: 'axis'
        },
        // 图例组件
        legend:{
        //     data:['销量'],
        //     show:true
        },
        xAxis: {
            type: 'category',
            data: ['2022-7', '2022-8', '2022-9', '2022-10', '2022-11']
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            data: [5000, 220000, 220000, 80000, 30000],
            // type: 'line' 折线图
            type:'bar', // 柱状图
            // name:'销量'
            color: '#FF0066',
        }],
        style:{
            width:"100%",
            height:"100%"
        }
    }

    useEffect(() => {
        const chart = echarts.init(chartRef.current)

        chart.setOption(options)

        return () => {
            chart.dispose()
        }
    },[])

    return(
        <div style={{width: "85%", height: "85%"}} ref={chartRef}></div>
    )
}
export default Echarts
